<template>
  <div v-loading="loading" class="gl_mb_15">
    <div>
      <el-row v-if="reportData.length > 0" class="report_title" type="flex" justify="space-between">
        <el-col :span="8">
          <el-button v-if="competition.approveStatusCode == 'ApproveFailed'" type="primary" size="mini" @click="dialogVisible = true">查看驳回原因</el-button>
          <el-button v-if="competition.approveStatusCode == 'ApproveFailed'" type="primary" size="mini" @click="jumpToGameEntry">修改</el-button>
        </el-col>
        <el-col :span="6" align="right" class="gl_pt_5 approve">
          <span>审核状态：</span>
          <span v-if="competition.approveStatusCode == 'ApproveSuccess'" class="gl_color_success">{{ competition.approveStatus.name }}</span>
          <span v-else class="gl_color_warning">{{ competition.approveStatus.name }}</span>
        </el-col>
      </el-row>
      <el-dialog title="驳回原因" class="gl_dialog_TitleLine" :visible.sync="dialogVisible" width="440px">
        <p>{{ competition.approveRemark }}</p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
      <el-table v-loading="personLoading" :data="competition.subjects" size="mini">
        <el-table-column type="index" width="100" align="center" />
        <el-table-column prop="name" label="培训及考试科目名称" />
      </el-table>
      <el-row class="gl_pt_20" style="text-align: center;">
        <el-pagination
          :current-page="Api_GET_EventsManagementEntryByPersonQO.Page"
          :page-size="Api_GET_EventsManagementEntryByPersonQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
// import {
//   api_GET_EventsManagementEntryByPerson, // 查询报项（按个人汇总报项）
//   api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalList // 获取审核状态
// } from '@/extend/api/gameswaggerApi/app.js';
import {
  Api_GET_EventsManagementEntryByPersonQO,
  Api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalListQO
} from '@/lib/form/game/swaggerForm';
import { mapState, mapActions } from 'vuex';
export default {
  props: {
    competition: {
      required: true,
      type: Object,
      default() { return {}; }
    }
  },
  data() {
    return {
      loading: false,
      personLoading: false,
      dialogVisible: false,
      Api_GET_EventsManagementEntryByPersonQO: new Api_GET_EventsManagementEntryByPersonQO(),
      ApprovalCompetitionEntryApprovalListQO: new Api_GET_EventsManagementCompetitionEntryApprovalCompetitionEntryApprovalListQO(),
      delegationId: '',
      registerId: '',
      totalPage: 0,
      approveStatus: {}, // 个人报项单状态
      approveRemark: '', // 驳回原因
      reportData: [], // 个人报项单信息
      gameId: ''
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType,
      dict: state => state.dict.dict
    })
  },
  watch: {
    'currentUserType': {
      handler: function(val) {
        if (val) {
          this.gameId = this.$route.query.id;
          this.registerId = val.registerId;
        }
      },
      deep: true,
      immediate: true // 初始加载
    }
  },
  created() {
    this.gameId = this.$route.query.id;
    // this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取个人报项单
    // getDetailPerson(page) {
    //   var that = this;
    //   that.personLoading = true;
    //   that.Api_GET_EventsManagementEntryByPersonQO.Page = page || 1;
    //   that.Api_GET_EventsManagementEntryByPersonQO.SkipCount = (that.Api_GET_EventsManagementEntryByPersonQO.Page - 1) * that.Api_GET_EventsManagementEntryByPersonQO.MaxResultCount;
    //   that.Api_GET_EventsManagementEntryByPersonQO.CompetitionId = that.$route.query.id;
    //   that.Api_GET_EventsManagementEntryByPersonQO.RegisterId = that.registerId;
    //   that.Api_GET_EventsManagementEntryByPersonQO.CompEntryApproveStatusCode = that.approveStatus.code;
    //   api_GET_EventsManagementEntryByPerson(that.Api_GET_EventsManagementEntryByPersonQO).then(res => {
    //     that.reportData = res.items;
    //     that.totalPage = res.totalCount;
    //     that.personLoading = false;
    //   }, error => {
    //     const _msg = error.error.message || error.message;
    //     this.$message({ type: 'error', message: _msg });
    //     this.personLoading = false;
    //   });
    // },
    // 个人报项单分页
    sizeChange(MaxResultCount) {
      this.Api_GET_EventsManagementEntryByPersonQO.MaxResultCount = MaxResultCount;
      this.getDetailPerson();
    },
    pageIndexChange(currentPage) {
      this.getDetailPerson(currentPage);
    },
    // 跳转至培训报名页面重新走流程
    jumpToGameEntry () {
      const _gameRoute = this.competition.route;
      this.$router.push({
        path: '/home/' + _gameRoute + '/enter?modifyType=Personal'
      });
    }
  }
};
</script>

<style scoped>
.report_title {
  vertical-align: middle;
  padding-bottom: 20px;
  border-bottom: 1px solid #DCDFE6;
}
.approve {
  font-size: 14px;
  vertical-align: middle;
}
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}

.dialog_wrap {
  padding: 0 20px;
}
</style>
